import React from 'react';
import { useNavigate } from 'react-router-dom';
import { Typography, Card, Row, Col, Button, Statistic } from 'antd';
import {
  ContainerOutlined,
  ClusterOutlined,
  DatabaseOutlined,
  ArrowUpOutlined,
} from '@ant-design/icons';

const { Title, Text } = Typography;

const ContainerHome: React.FC = () => {
  const navigate = useNavigate();

  // 统计数据
  const statistics = [
    {
      title: '运行中的容器',
      value: 23,
      precision: 0,
      valueStyle: { color: '#3f8600' },
      prefix: <ArrowUpOutlined />,
      suffix: '个',
    },
    {
      title: '集群节点',
      value: 8,
      precision: 0,
      valueStyle: { color: '#1890ff' },
      suffix: '个',
    },
    {
      title: '镜像仓库',
      value: 156,
      precision: 0,
      valueStyle: { color: '#722ed1' },
      suffix: '个',
    },
    {
      title: 'CPU使用率',
      value: 68.2,
      precision: 1,
      valueStyle: { color: '#fa8c16' },
      suffix: '%',
    },
  ];

  // 服务卡片数据
  const serviceCards = [
    {
      title: '容器镜像仓库',
      description: '管理Docker镜像的存储和分发',
      buttonText: '管理镜像',
      features: ['镜像上传下载', '版本管理', '安全扫描'],
      color: '#722ed1',
      icon: <DatabaseOutlined style={{ fontSize: 24, color: '#722ed1' }} />,
      action: () => navigate('/app/containers/images')
    },
    {
      title: 'Kubernetes集群',
      description: '容器编排和集群管理服务',
      buttonText: '管理集群',
      features: ['Pod管理', '服务发现', '自动扩容'],
      color: '#1890ff',
      icon: <ClusterOutlined style={{ fontSize: 24, color: '#1890ff' }} />,
      action: () => navigate('/app/containers/cluster')
    },
  ];

  return (
    <div>
      {/* 欢迎信息 */}
      <div style={{ marginBottom: '32px' }}>
        <Title level={3} style={{ margin: 0, marginBottom: '8px', display: 'flex', alignItems: 'center' }}>
          <ContainerOutlined style={{ marginRight: '12px', color: '#1890ff' }} />
          容器服务管理中心
        </Title>
        <Text type="secondary" style={{ fontSize: '16px' }}>
          高效的容器化应用管理，支持Docker镜像仓库和Kubernetes集群服务。
        </Text>
      </div>

      {/* 统计信息 */}
      <Row gutter={[24, 24]} style={{ marginBottom: '32px' }}>
        {statistics.map((stat, index) => (
          <Col xs={24} sm={12} lg={6} key={index}>
            <Card>
              <Statistic
                title={stat.title}
                value={stat.value}
                precision={stat.precision}
                valueStyle={stat.valueStyle}
                prefix={stat.prefix}
                suffix={stat.suffix}
              />
            </Card>
          </Col>
        ))}
      </Row>

      {/* 服务卡片网格 */}
      <Row gutter={[24, 24]}>
        {serviceCards.map((card, index) => (
          <Col xs={24} sm={12} lg={12} key={index}>
            <Card
              style={{
                height: '220px',
                borderRadius: '12px',
                border: '1px solid #e8e8f0',
                background: 'linear-gradient(135deg, #f8faff 0%, #ffffff 100%)',
                transition: 'all 0.3s ease'
              }}
              bodyStyle={{
                padding: '24px',
                height: '100%',
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'space-between'
              }}
              hoverable
              onMouseEnter={(e) => {
                e.currentTarget.style.transform = 'translateY(-2px)';
                e.currentTarget.style.boxShadow = '0 8px 24px rgba(64, 133, 244, 0.12)';
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.transform = 'translateY(0)';
                e.currentTarget.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.06)';
              }}
            >
              <div>
                <div style={{ display: 'flex', alignItems: 'center', marginBottom: '12px' }}>
                  {card.icon}
                  <Title level={4} style={{ margin: 0, marginLeft: '12px', fontSize: '18px' }}>
                    {card.title}
                  </Title>
                </div>
                <Text style={{ 
                  color: '#666', 
                  fontSize: '14px', 
                  display: 'block',
                  marginBottom: '16px'
                }}>
                  {card.description}
                </Text>
                
                <Button
                  type="primary"
                  style={{
                    width: '100%',
                    height: '40px',
                    borderRadius: '8px',
                    fontSize: '14px',
                    fontWeight: 500,
                    background: card.color,
                    borderColor: card.color,
                    marginBottom: '16px'
                  }}
                  onClick={card.action}
                >
                  {card.buttonText}
                </Button>
              </div>
              
              <div>
                <Text 
                  type="secondary" 
                  style={{ 
                    fontSize: '12px',
                    lineHeight: '18px',
                    display: 'block',
                    marginBottom: '8px'
                  }}
                >
                  主要功能：
                </Text>
                <div>
                  {card.features.map((feature, idx) => (
                    <Text 
                      key={idx}
                      type="secondary" 
                      style={{ 
                        fontSize: '12px',
                        marginRight: '12px'
                      }}
                    >
                      • {feature}
                    </Text>
                  ))}
                </div>
              </div>
            </Card>
          </Col>
        ))}
      </Row>
    </div>
  );
};

export default ContainerHome; 